<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
       xmlns:sec="http://www.springframework.org/security/tags">
    <h:head>
        <title>Libro Seleccionado</title>

        <script language="javascript" type="text/javascript" >
            function TextoLLeno() {
               var valor = document.getElementById("j_idt42:inputarea").value;
                if(valor.length != 0){
                        return (true)
                }else{
                        return (false)
                }
            }

        </script>

        <style>
            body {
                width: 960px;
                margin: 40px auto;
                height:100%;
                font-size:14px;
                color:black;
                font-family:Arial, Helvetica, sans-serif;
                background-color: #708090;
            }
            #Puntua {
                font-style: italic;
                font-size: 15px;
                font-family: cursive;
                position: absolute;
                right:20%;
                top:15%;

            }
            #datLibros {
                font-style: italic;
                font-size: 18px;
                font-family: cursive;
            }
            #media{
                position: relative;
                font-size: 20px;
                width: 20%;
                height: 20%;
            }
        </style>

    </h:head>
    <h:body>

        <p:growl showDetail="true" autoUpdate="true" id="delu"  transient="true" sticky="true"/>

        <p:panel header="#{msg.actual_l}: #{libroAver.titulo}" id="actu" >

            <p:fieldset>
                <div id="datLibros" >
                    <h:outputText value="#{msg.isbn}: #{libroAver.isbn}"/><br></br>
                    <h:outputText value="#{msg.tituloT}: #{libroAver.titulo}"/><br></br>
                    <h:outputText value="#{msg.autor}: #{libroAver.autor}"/><br></br>
                    <h:outputText value="#{msg.editorial}l: #{libroAver.editorial}"/><br></br>
                    <h:outputText value="#{msg.genero}: #{libroAver.genero}"/><br></br>
                    <p:graphicImage url="#{libroAver.imagen}" rendered="#{libroAver.imagen != null}" alt="no imagen" />
                </div>

                <!-- <ui:remove>-->

                <h:form id="Puntua">
                    <center>
                        <h:panelGrid columns="2" cellpadding="5">
                            <h:outputText value="#{msg.rating}:" />
                            <p:rating value="#{votoControlador.rating1}" stars="5" />
                        </h:panelGrid>
                        <p:commandButton action="ircrearVoto" value="Submit" ajax="false" update="delu" style="margin:20px"/>
                    </center>
                </h:form>
            </p:fieldset>
            <br></br>
            <h:outputLabel value="#{msg.vyp}: #{votosLibro}" style="font-size:medium" rendered="#{votosLibro != 0}" /><br></br>
            <center>
                <h:outputLabel value="#{msg.vmedio}: #{mediaVotos}" style="font-size:medium" rendered="#{votosLibro != 0}" />
                <h:panelGrid id="med2" columns="2" cellpadding="5" rendered="#{votosLibro != 0}" >
                    <p:rating id="media" value="#{mediaVotos}" stars="5" disabled="true" rendered="#{votosLibro != 0}" />
                </h:panelGrid>

                <br></br>
            </center>

            <h:outputLabel value=" #{msg.comentarios}" rendered="#{comentarios != null}" style="font-size: large;font-style: italic" />
            <p:fieldset rendered="#{comentarios != null}" style="text-align : left">
                <ui:repeat value="#{comentarios}" var="coment">
                    <p:separator></p:separator>
                    <div>
                        <table>
                            <tr>
                                <td>
                            <h:outputText value="#{msg.autor}: #{coment.comentador}" /><br></br>
                            </td>
                            <td>
                            <h:outputText value=" #{coment.fechaC}"/><br></br>
                            </td>
                            </tr>
                            <tr>
                                <td colspan="2" >
                            <h:outputText value="Comentario :  #{coment.contenido}"/><br></br>
                            <sec:authorize access="hasRole('ROLE_ADMIN')">
                            <h:form prependId="false" >
                     <p:commandButton value="#{msg.borrar}"  action="irborrar" ajax="false" update="delu">
                        <f:setPropertyActionListener value="#{coment}"  target="#{libroControlador.comentario}" />
                        <f:setPropertyActionListener value="#{libroAver.isbn}" target="#{libroControlador.isbn}" />
                    </p:commandButton>
                            </h:form>
                            </sec:authorize>
                            </td>
                            </tr>
                        </table>
                    </div>

                    <br></br>
                </ui:repeat>
            </p:fieldset>





            <p:fieldset rendered="#{comentarios == null}" >
                <h:outputText value="#{msg.no_com}" />
            </p:fieldset>
            <!-- </ui:remove> -->
            <br></br>
            <br></br>
            <h:form onsubmit="return TextoLLeno()" >
                    <h:outputText value="#{msg.r_com}: "/>
                <br></br>
                <p:inputTextarea id="inputarea" value="#{libroControlador.cadComentada}" rows="5" cols="50" required="true"/>
                <br></br>
                <p:commandButton value="#{msg.comentar}"  action="ircrearCom" ajax="false" update="siCom"/>
            </h:form>

        </p:panel>
        <h:outputLink value="/index.html">#{msg.inicio}</h:outputLink>

    </h:body>
</html>